<template>
    <div class="w-50 mx-auto mt-5">
        <!-- 实现自定义组件的 v-model -->
        <!-- <ValidateInput
            type="password"
            v-model="username"
            placeholder="请输入用户名"
        /> -->
        <!-- 实现组件的 v-model 就是给这个组件传递 value 属性，并且监听 input 事件 -->
        <!-- <ValidateInput :value="username" @input="handleInput" /> -->

        <!-- 验证表单 -->
        <ValidateForm :model="form" :rules="rules" ref="formRef">
            <ValidateFormItem label="用户名" prop="username">
                <ValidateInput
                    v-model="form.username"
                    placeholder="请输入用户名"
                />
            </ValidateFormItem>

            <ValidateFormItem label="密码" prop="password">
                <ValidateInput
                    type="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                />
            </ValidateFormItem>

            <ValidateFormItem label="确认密码" prop="confirmPassword">
                <ValidateInput
                    type="password"
                    v-model="form.confirmPassword"
                    placeholder="请输入密码"
                />
            </ValidateFormItem>

            <button class="btn btn-primary btn-block mt-5" @click="login">
                登录
            </button>
        </ValidateForm>

        <!-- <p>{{ isChecked }}</p> -->
        <!-- <ValidateCheckbox
            v-model="isChecked"
            checked
            @change=""
        ></ValidateCheckbox> -->
        <!-- <ValidateCheckbox
            :value="isChecked"
            @input="isChecked = $event"
        ></ValidateCheckbox> -->

        <!-- <ValidateCheckbox v-model="isChecked"></ValidateCheckbox> -->
        <!-- <ValidateCheckbox
            :checked="isChecked"
            @change="isChecked = $event"
        ></ValidateCheckbox> -->

        <!-- <ValidateCheckbox :abc.sync="isChecked"></ValidateCheckbox> -->
        <!-- 相当于 -->
        <!-- <ValidateCheckbox
            :abc="isChecked"
            @update:abc="isChecked = $event"
        ></ValidateCheckbox> -->
    </div>
</template>

<script>
import ValidateInput from './ValidateInput';
import ValidateFormItem from './ValidateFormItem';
import ValidateForm from './ValidateForm';
import ValidateCheckbox from './ValidateCheckbox';
import createMessage from './createMessage.js';
export default {
    components: {
        ValidateInput,
        ValidateFormItem,
        ValidateForm,
        ValidateCheckbox,
    },
    data() {
        return {
            isChecked: true,
            form: {
                username: '',
                password: '',
                confirmPassword: '',
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                    },
                    {
                        message: '请输入 6 ～ 20 个字符',
                        validator: (rule, value) => /^[\w]{6,20}$/.test(value),
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: '请输入密码',
                    },
                    {
                        message: '密码输入不一致',
                        validator: (rule, value) =>
                            this.form.password === this.form.confirmPassword,
                    },
                ],
            },
        };
    },
    methods: {
        handleInput(value) {
            this.username = value;
        },
        login() {
            this.$refs.formRef.validate((isOk) => {
                if (!isOk) {
                    // this.$message('表单校验失败', 'danger');
                    createMessage('表单校验失败', 'danger');
                    return;
                }
                this.$message('表单校验成功', 'success');
            });
        },
    },
};
</script>
